<template>
  <main-nav-bar>
    <template v-slot:center-name>
      <div>{{name}}</div>
      <div></div>
    </template>
    <template v-slot:home-nav-back>
      <div><i class="iconfont icon-jiantou2"></i></div>
    </template>
  </main-nav-bar>
  <div class="content">
    <div class="bgc">
      <img src="https://qnhyd.laigl.com/76a505e15b4162aeb1114ea65677f620.png" alt="" />
    </div>
    <div class="bgc_bt">
      <img src="https://qnhyd.laigl.com/9da41c728da80199d4bc4499b60602fc.png" alt="" />
    </div>
    <div>
      <div class="content_new" ref="getheight">
        <div :class="!isEven?'even':'odd'">
          <!-- <div class="new" :class="!isClock[index]?'clock':''"  v-for="(item,index) in bookDetail" :key="item.id"> -->
          <div class="new" :id="'wait'+item.status" :class="{'clock':item.status==0 || item.status==2}"  v-for="(item) in bookDetail" :key="item.id">
          <div class="new_li " @click="goRead(item.id)">
            <div class="new_tp">
              <img src="https://qnhyd.laigl.com/6cb9725abb908f793b656521a14c45bc.png" alt="" v-if="item.status!==2">
              <p>{{item.title}}</p>
              <!-- 第{{changeNumToHan(item.id)}}节 -->
              </div>
            <div class="new_bt">
              <p>{{item.name}}</p>
              </div>
            <div class="badge">
              <img src="https://qnhyd.laigl.com/3a13f64e5b7319fcddd9cd2b288db582.png" alt="" />
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request }from "../../network/request"
import MainNavBar from "../../components/content/mainnavbar/MainNavBar.vue";
export default {
  data() {
    return {
      id: "",
      bookDetail:[],
      clocklist:[1],
      name:"",
      isClock:[]
    };
  },
  computed:{
    isEven(){
      if(this.bookDetail.length%2)return true;
      return false;
    },
    
  },
  methods: {
    getscreenClick(){
      let arr =  this.bookDetail.map((item)=>{
        return this.clocklist.indexOf(String(item.id))!=-1
      })
      this.isClock = arr.reverse()
    },
    
    getElement(ele,index,length){
      //动态绑定打开，自动开启下一个打卡
      let num  =  this.clocklist.length + 1
      if(index== length - num)return true;
      return this.clocklist.indexOf(String(ele.id))!=-1 
    },
    goRead(id) {
      this.$router.push({
        path: "/clockdetail",
        query:{
          id:id
        }
      });
    },
    async getClocklist() {
      const res = await request({
        url: "v1.index/clock_list",
        data: {
          book_id: this.id,
          user_id:sessionStorage.getItem("user_id")
        },
      });
      this.clocklist = res.data.row;
      this.getscreenClick()
    },
     async getbookDetail() {
      const res = await request({
        url: "/v1.index/getBookList",
        data: {
          book_id: this.id,
          user_id:sessionStorage.getItem("user_id")
        },
      });
      let arr = res.data.rows.reverse();
      this.bookDetail = arr
      this.getClocklist()
    },
   
  },
  updated(){
     let content = document.querySelector('.content')
     let comp =  window.getComputedStyle(content);
    window.scrollTo(0,parseInt(comp.height,10))
          },
  mounted() {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    this.getbookDetail()
  },
  components: {
    MainNavBar,
  },
};
</script>

<style  scoped>
#wait2 .new_li{
  color:#700b04;
}
.content {
  position: relative;
}
.bgc {
  position: fixed;
  width: 100vw;
  z-index: -1;
}
.bgc img {
  width: 100%;
  height: 100vh;
}
.bgc_bt {
  position: fixed;
  z-index: 10;
  bottom: -1.333vw;
  right: 0;
  left: 0;
}
.bgc_bt img {
  width: 100%;
}
.content_new {
  position: relative;
  min-height: 137.867vw;
  /* bottom: 0; */
  /* background-color: rgb(179, 76, 76); */
  background: url(https://qnhyd.laigl.com/7f00ce3ffe2d4bac2bb138a9b0426d36.png) repeat-y 1.333vw 1.333vw;
  background-size: 82vw 130vw;
  background-position-y: 2.667vw;
  width: 89.333vw;
  margin: 0 5.333vw;
  margin-bottom: 13.333vw;
  padding-top: 26.667vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
}
.content_new .odd{
    display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
}
.new {
  /* position: absolute; */
  margin-bottom: 22.067vw;
}
.content_new .new:nth-child(1){
    margin-bottom: 16vw;
}
.content_new .odd  .new:nth-child(odd) {
margin-left: 36vw;
}
.content_new .even  .new:nth-child(even) {
margin-left: 36vw;
}
.new_li {
  position: relative;
  width: 52vw;
  height: 13.067vw;
  text-align: center;
  color: #700b04;
  border-radius: 2.667vw;
  background: linear-gradient(to right, #e57159 0%, #f8c68f 100%);
  box-shadow: 0vw 2.667vw 3.2vw -1.067vw #e8a497;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
 .new_tp img{
  display: none;
}
.clock .new_li{
  color: #fff;
  background: linear-gradient(to right, #bababa 0%, #bababa 100%);
  box-shadow: 0vw 2.667vw 3.2vw -1.067vw #bababa;
}
#wait0.clock{
   pointer-events: none;
}
.clock .badge{
  display: none;
}
 .clock .new_tp img{
  display:inline-block;
}
.new_tp {
  display: flex;
  justify-content: center;
  font-size: 3.733vw;
  line-height: 8vw;
  width: 161px;
  padding: 0 17px;
}
.clock .new_tp{
  line-height: 4vw;
}
.new_tp img{
  width: 3.467vw;
  height:3.467vw;
  margin-right: 5px;
  vertical-align: middle;
}
.new_bt {
  width: 49.333vw;
  font-size: 3.2vw;
  line-height: 4.267vw;
  padding: 0 5px;
}
.new_bt p{
  margin: 0;
  overflow:hidden;
  text-overflow:ellipsis; /* 加省略号 */
  white-space:nowrap; /* 强制不换行 */
}

.badge img {
  width: 11.2vw;
  position: absolute;
  top: -4vw;
  left: -5.867vw;
}
.right {
  right: -37.333vw;
}
.left {
  left: 2.667vw;
}
p{
  margin: 0;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>